<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/cropper.min.css" rel="stylesheet">
		<link href="css/index.css" rel="stylesheet">
	</head>
	<body>
		
	 <img id="head-image-container" style="border-radius:50%" src="img/headDemo.jpg" />
	 
	 
	 
   <div id="cropper-layer" style="width: 100%;height: 600px;background-color: #C0C0C0;display: none;" >
	 <!--裁切区域  -->	
	  <div class="col-md-9">
	 	<div class="image-container">
	 	   <img src="" />
	 	</div>
	  </div>
	 <!--显示区域  -->	
	  <div class="col-md-3">
	  	<div class="preview-container clearfix">
          <div class="img-preview preview-lg"></div>
          <div class="img-preview preview-md"></div>
        </div>
	  </div>	
	  <div class="row">
       <div class="col-md-9 docs-buttons">	
	  	  <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
            <input class="sr-only" id="inputImage" name="file" type="file" accept="image/*">
            <span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
              <span class="icon icon-upload"></span>
            </span>
          </label>
	    </div>
	  </div>
	  	
	  	
	 </div>
	 
	 <script src="js/jquery-1.11.3.min.js"></script>
	 <script src="js/bootstrap.min.js"></script>
	 <script src="js/cropper.min.js"></script>
	 <script src="js/layer/layer.js"></script>	
	 <script src="js/index.js"></script>
	</body>
</html>
